<template>
  <div class="AdvisoryDetails">
    <div class="header_AdvisoryDetails">
      <div class="centre">
        <img src="@/assets/img/huize_logo.png" alt />
      </div>
    </div>
    <div class="content_AdvisoryDetails">
      <div class="content centre">
        <div class="content_left">
          <div class="content_header">
            <router-link to="/film" tag="span">首页</router-link>>
            <router-link to="/Advisory" tag="span">资讯</router-link>>
            资讯详情
          </div>
          <div class="contentDetails">
            <h3>{{Details.title}}</h3>
            <div class="item_tyle">
              <span class="item">{{Details.createTime}}</span>
              <span class="tyle">
                #{{Details.type == "0" ? "教育部"
                : Details.type == "1" ? "本省政策"
                : Details.type == "2" ? "最新动态"
                :" "}}
              </span>
            </div>
            <div class="content_Details" v-html="Contents"></div>
          </div>
        </div>
        <div class="content_right">
          <h3>分类</h3>
          <div class="button_tyle">
            <el-button>报名</el-button>
            <el-button>政治品德审查</el-button>
            <el-button>体验面试</el-button>
            <el-button>志愿填报</el-button>
            <el-button>考试</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "AdvisoryDetails",
  data() {
    return {
      Id: "",
      Details: [],
      Contents: ""
    };
  },
  beforeCreate() {
    this.$nextTick(() => {});
  },
  created() {
    let id = this.$route.params.id;
    this.getDeatil(id);
    
  },
  methods: {
    getDeatil(Id) {
      //let Id = this.$route.params.id;

      this.$ajax({
        method: "GET",
        url: "/api/policy/policy/data?policyId=" + Id,

        success: res => {
          if (res.data.code == 0) {
            this.Details = res.data.data;

            let datas = res.data.data.content;
            this.Contents =
              "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" +
              datas.replace(/\n/g, "<p>");
          }
        }
      });
    }
    //   created() {
    //   this.getDeatil();

    // }
  }
};
</script>
<style lang="scss">
.AdvisoryDetails {
  .header_AdvisoryDetails {
    img {
      height: 36px;
      margin: 18px 0;
    }
  }
  .content_AdvisoryDetails {
    background: #f6f6f6;
    padding-bottom: 120px;
    .content {
      display: flex;
      justify-content: space-between;
      .content_left {
        overflow: hidden;
        .content_header {
          color: #757575;
          margin-top: 26px;
          span {
            cursor: pointer;
          }
        }
        .contentDetails {
          width: 784px;
          background: #fff;
          border-radius: 10px;
          padding: 0 66px;
          margin: 0 auto;
          margin-top: 20px;
          padding-bottom: 40px;
          min-height: 1060px;
          overflow-y: auto;

          h3 {
            padding-top: 30px;
            font-size: 22px;
            color: #515151;
            line-height: 56px;
          }
          .item_tyle {
            color: #757575;
            padding-bottom: 33px;
            span {
              font-size: 12px;
              padding-right: 36px;
            }
          }
          .content_Details {
            color: #414141;
            font-size: 16px;
            line-height: 20px;
            img {
              width: 100%;
              border-radius: 10px;
              display: block;
              margin: 26px 0;
            }
          }
        }
      }
      .content_right {
        width: 242px;
        height: 300px;
        margin-top: 46px;
        border-radius: 10px;
        background: #ffffff;
        h3 {
          font-size: 22px;
          color: #414141;
          line-height: 90px;
          padding-left: 27px;
        }
        .button_tyle {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          .el-button + .el-button {
            margin-left: 0;
          }
          .el-button {
            margin-bottom: 12px;
          }
        }
      }
    }
  }
}
</style>